import React from 'react';
import { Button, Form, Input, InputNumber, Card, Row, Col, Select, DatePicker } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

export default function TenantBillCreate() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      if (values.billDate && values.billDate.format) {
        values.billDate = values.billDate.format('YYYY-MM-DD HH:mm:ss');
      }
      if (values.payDate && values.payDate.format) {
        values.payDate = values.payDate.format('YYYY-MM-DD HH:mm:ss');
      }
      values.key = Date.now();
      navigate('/tenant-bill', { state: { newTenantBill: values } });
    } catch (e) {}
  };

  return (
    <div style={{ background: '#f5f7fa', minHeight: '100vh', padding: 32 }}>
      <div style={{ maxWidth: 800, margin: '0 auto', background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 32, position: 'relative' }}>
        <h2 style={{ fontWeight: 700, fontSize: 22, marginBottom: 24 }}>租户账单新增页面</h2>
        <Form form={form} layout="vertical">
          <Card style={{ borderRadius: 12, marginBottom: 0, padding: 24 }} bodyStyle={{ padding: 0 }}>
            <Row gutter={32}>
              <Col span={12}>
                <Form.Item label="租户名称" name="name" rules={[{ required: true, message: '请输入租户名称' }]} required>
                  <Input placeholder="请输入租户名称" />
                </Form.Item>
                <Form.Item label="账单编号" name="billNo" rules={[{ required: true, message: '请输入账单编号' }]} required>
                  <Input placeholder="请输入账单编号" />
                </Form.Item>
                <Form.Item label="账单类型" name="type" rules={[{ required: true, message: '请选择账单类型' }]} required>
                  <Select placeholder="请选择账单类型">
                    <Option value="电费">电费</Option>
                    <Option value="水费">水费</Option>
                    <Option value="燃气费">燃气费</Option>
                    <Option value="物业费">物业费</Option>
                  </Select>
                </Form.Item>
                <Form.Item label="使用量" name="usage" rules={[{ required: true, message: '请输入使用量' }]} required>
                  <InputNumber placeholder="请输入使用量" style={{ width: '100%' }} min={0} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="单价" name="price" rules={[{ required: true, message: '请输入单价' }]} required>
                  <InputNumber placeholder="请输入单价" style={{ width: '100%' }} min={0} step={0.01} />
                </Form.Item>
                <Form.Item label="出账时间" name="billDate" rules={[{ required: true, message: '请选择出账时间' }]} required>
                  <DatePicker showTime style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item label="缴费时间" name="payDate" rules={[{ required: true, message: '请选择缴费时间' }]} required>
                  <DatePicker showTime style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>
          </Card>
        </Form>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Button type="primary" style={{ width: 120, marginRight: 32 }} onClick={handleSave}>保存</Button>
          <Button style={{ width: 120 }} onClick={() => navigate(-1)}>返回</Button>
        </div>
      </div>
    </div>
  );
} 